<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import TreeUtilDTO from '@/utils/tree'

// 入参

// 生命周期
onMounted(() => {
  // 查询树
  queryTree()
})
const treeData = ref<any>([])

/*
 * 查询树
 */
const queryTree = () => {
  //
  const res = {
    data: [
      {
        ajbh: '',
        bh: '1',
        mc: '正卷',
        fbh: '',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '456',
        mc: '接收案件通知书',
        fbh: '1',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '485',
        mc: '起诉意见书',
        fbh: '1',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '3',
        mc: '副卷',
        fbh: '',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '528',
        mc: '换押证',
        fbh: '3',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },

      {
        ajbh: '',
        bh: '658',
        mc: '提讯，提解',
        fbh: '3',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
    ],
  }

  //处理数据
  treeData.value = TreeUtilDTO.getTreeData(res.data, 'bh', 'fbh')
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

/*
 * 树节点过滤
 */
const treeNodeFilter = () => {
  //
}

/*
 * 树节点渲染
 */
const treeNodeRender = () => {
  //
}

/*
 * 树节点点击（抛出方法到主界面）
 */
const treeNodeClick = () => {
  //
}

/*
 * 打开添加目录弹框
 */
const openAddMlDialog = () => {
  //
}

/*
 * 删除目录
 */
const deleteMl = () => {
  //
}
</script>
<template>
  <div class="container">
    <div class="bottom">
      <!--   @node-drop="handleDrop" -->
      <!-- draggable -->
      <el-tree
        style="max-width: 600px"
        :data="treeData"
        show-checkbox
        node-key="bh"
        default-expand-all
        :props="defaultProps"
        @node-click="treeNodeClick"
      >
        <template #default="{ data }">
          <span class="custom-tree-node">
            <!-- <el-icon><FolderOpened /></el-icon> -->
            <span>
              {{ data.mc }}
            </span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .bottom {
    .tree_rightmenu {
      position: fixed;
      width: 120px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      z-index: 1000;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
